<!DOCTYPE html><html><head><title>10-第十章  vertical-align cursor opacity</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="10-第十章-vertical-align-cursor-opacity">10-第十章  vertical-align cursor opacity</h1>

<p></p>



<h2 id="一vertical-align-垂直对齐方式">一、vertical-align 垂直对齐方式</h2>

<p>定义行内元素的基线相对于该元素所在行的基线的垂直对齐。inline  inline-block元素才具备此属性</p>

<blockquote>
  <ul><li>top          元素的顶端与行中最高元素的顶端对齐</li>
  <li>middle        此元素放置在父元素的中部。(小写x的中部)</li>
  <li>bottom        元素的顶端与行中最低的元素的顶端对齐。</li>
  </ul>
</blockquote>

<p>以上值与<code>line-height</code>相关的</p>

<blockquote>
  <ul><li>text-top     元素的顶端与父元素字体的顶端对齐</li>
  <li>text-bottom   把元素的底端与父元素字体的底端对齐。</li>
  <li>baseline      默认。元素放置在父元素的基线上。</li>
  </ul>
</blockquote>

<p>=&gt;加vertical-align的同排元素都要vertical-align； <br>
=&gt;vertical-align可以解决img下方间隙问题；</p>

<hr>



<h2 id="二cursor指针样式">二、cursor指针样式</h2>

<p>1、cursor 指针样式 （规定要鼠标进入元素内容区域要显示的光标的类型）</p>

<blockquote>
  <ul><li>default      箭头（通常是一个箭头）</li>
  <li>auto      默认。浏览器设置的光标。</li>
  <li>pointer       光标呈现为指示链接的指针（一只手）</li>
  <li>move      此光标指示某对象可被移动。</li>
  <li>text      光标指示文本。</li>
  <li>wait      光标指示正忙（通常是一只表或沙漏）。</li>
  <li>help      光标指示帮助（通常是一个问号或一个气球）</li>
  </ul>
</blockquote>

<p>参考资料：<a href="http://www.w3school.com.cn/cssref/pr_class_cursor.asp" target="_blank">http://www.w3school.com.cn/cssref/pr_class_cursor.asp</a></p>

<p>2、自定义指针样式</p>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs css"><div class="hljs-line"><span class="hljs-comment line-number">1.</span>{ <span class="hljs-attribute">cursor</span>:<span class="hljs-built_in">url</span>(<span class="hljs-string">'hand.cur'</span>),pointer； }
</div></code></pre>

<hr>



<h2 id="三opacitycss3-透明度">三、opacity（css3） 透明度</h2>

<p>opacity 属性设置元素的不透明级别</p>

<blockquote>
  <p>opacity:0~1; </p>
  
  <ul><li>0（完全透明）</li>
  <li>1（完全不透明）</li>
  </ul>
</blockquote>

<p>IE 滤镜： filter:alpha(opacity=0~100);</p>

<blockquote>
  <ul><li>0     （完全透明）</li>
  <li>100（完全不透明）</li>
  </ul>
</blockquote></div></body></html>